<template>
    <div class="operate-group">
        <template v-for="(btn, key) in data">
            <div class="item"
                 v-if="btn.show && (!btn.filter || btn.filter(scope && scope.row, key))"
                 :key="key" v-permission="btn.permission"
                 :style="key == 0 && !scope.row ? 'margin-left:0 !important' : ''">
                <template v-if="btn.tooltip">
                    <custom name="ElTooltip" :attributes="btn.tooltip">
                        <custom-button :options="btn" :index="scope && scope.$index" :row="scope && scope.row" />
                    </custom>
                </template>
                <template v-else-if="btn.btnType === 'print'">
                    <print-dropdown-btn :type="btn.printType" :options="btn.dropdown" :btn-options="btn"
                                        :dropdown-item="btn.dropdownItems" @command="btn.method" />
                </template>
                <template v-else-if="btn.btnType === 'dropdown'">
                    <el-dropdown placement="bottom-start" @command="btn.method">
                        <span>
                            <custom-button :options="btn" :index="scope && scope.$index" :row="scope && scope.row" />
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <template v-for="(child, childIndex) in btn.dropdownItems">
                                <custom v-if="filterDropdownItems(child, btn)" :key="childIndex" name="ElDropdownItem"
                                        :attributes="child">
                                    {{ child.label }}
                                </custom>
                            </template>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
                <template v-else>
                    <custom-button :options="btn" :index="scope && scope.$index" :row="scope && scope.row" />
                </template>
            </div>
        </template>
    </div>
</template>
<script>

export default {
    name: "vButtons",
    props: {
        scope: {
            type: Object,
            default() {
                return {};
            },
        },
        data: {
            type: Array,
            default() {
                return [];
            },
        },
    },
    components: {
        CustomButton: () => import("../custom/Button"),
        PrintDropdownBtn: () => import("../custom/PrintDropdownBtn"),
        Custom: () => import("../custom"),
        expandDom: {
            functional: true,
            props: {
                data: Object,
                render: Function,
                index: Number,
            },
            render: (h, ctx) => {
                const params = {
                    data: ctx.props.data,
                    index: ctx.props.index,
                };
                return ctx.props.render(h, params);
            },
        },
    },
    methods: {
        filterDropdownItems(child, btn) {
            if (typeof btn.filterDropdownItem === 'function') {
                return btn.filterDropdownItem(child, btn);
            }
            return true;
        },
    },
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
.operate-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .item {
        display: inline-block;
        margin: 5px 5px 5px 0;

        &:last-child {
            margin-right: 0;
        }
    }
}
</style>
<style>
.el-button--small,
.el-button--small.is-round {
    padding: 9px;
    max-height: 32px !important;
}
</style>
